<template>
	<div id="app">
		<f7-statusbar></f7-statusbar>
		<div class="login-screen modal-in">
			<div class="view">
				<div class="page">
					<div class="page-content login-screen-content">
						<div class="login-screen-title">登录</div>
						<form>
							<div class="list-block">
								<ul>
									<li class="item-content">
										<div class="item-inner">
											<div class="item-title label">用户名</div>
											<div class="item-input">
												<input type="text" name="username" placeholder="请输入用户名..." ref="uname">
											</div>
										</div>
									</li>
									<li class="item-content">
										<div class="item-inner">
											<div class="item-title label">密码</div>
											<div class="item-input">
												<input type="password" name="password" placeholder="请输入密码..." ref="pwd">
											</div>
										</div>
									</li>
								</ul>
							</div>
							<div class="list-block">
								<ul>
									<li>
										<a rel="noreferrer" href="#" class="item-link list-button C-alert" @click="getUserInfo()">登录</a>
									</li>
								</ul>
							</div>
						</form>
						<div class="list-block-label">
							<p>还没有帐号吗？点击下面的按钮加入GitStar吧！</p>
							<p>
								<a href="#" data-popup=".popup-reg" class="open-popup C-aTab">点击注册</a>
							</p>
						</div>

					</div>
				</div>
			</div>
		</div>

		<div class="popup popup-reg tablet-fullscreen">
			<div class="content-block">
				<div class="login-screen-title">注册</div>
				<div class="list-block">
					<ul>
						<li class="item-content">
							<div class="item-inner">
								<div class="item-title label">用户名</div>
								<div class="item-input">
									<input type="text" placeholder="请与GitHub用户名一致..." ref="regUname">
								</div>
							</div>
						</li>
						<li class="item-content">
							<div class="item-inner">
								<div class="item-title label">密码</div>
								<div class="item-input">
									<input type="password" placeholder="请输入密码..." ref="regPwd">
								</div>
							</div>
						</li>
					</ul>
				</div>
				<div class="list-block">
					<ul>
						<li>
							<a rel="noreferrer" href="#" class="item-link list-button C-alert" @click="regUser()">注册</a>
						</li>
					</ul>
				</div>

				<div class="list-block-label C-fds">
					<p>已有帐号,
						<a href="#" class="close-popup">去登录</a>
					</p>
				</div>

			</div>
		</div>
		<f7-panel left reveal>
			<f7-view id="left-panel-view" navbar-through :dynamic-navbar="true">
				<f7-navbar v-if="$theme.ios" title="个人设置" sliding></f7-navbar>
				<f7-pages>
					<f7-page>
						<f7-navbar v-if="$theme.material" title="Left Panel" sliding></f7-navbar>
						<f7-list class="C-qzBl">
							<f7-list-item class="C-list">
								<a href="#" data-popup=".popup-add" class="open-popup C-aTab">项目管理</a>
							</f7-list-item>
							<f7-list-item class="C-list">
								<a href="#" data-popup=".popup-pwd" class="open-popup C-aTab">修改密码</a>
							</f7-list-item>
							<f7-list-item class="C-list">
								<a href="#" data-popup=".popup-userInfo" class="open-popup C-aTab">个人资料</a>
							</f7-list-item>
							<f7-list-item @click="loginOut()" title="退出登录" link-view="#main-view" link-close-panel></f7-list-item>
						</f7-list>
					</f7-page>
				</f7-pages>
			</f7-view>
		</f7-panel>

		<div class="popup popup-add tablet-fullscreen">
			<div class="content-block">
				<div class="login-screen-title">项目管理</div>
				<f7-block inner class="C-qzB">
					<h3>项目列表：</h3>
					<div class="list-block">

						<ul v-if="repObj">
							<li class="item-content" v-for="(item, index) in repObj">
								<div class="item-inner">

									<div class="item-input">
										<input type="text" :value="item.Name" />
									</div>
								</div>
							</li>
						</ul>
					</div>
					<h3>项目格式为：<b class="C-num">user_name/repo_name</b></h3>
					<div class="list-block">

						<ul>
							<li class="item-content">

								<div class="item-inner">

									<div class="item-title label">项目名称</div>
									<div class="item-input">
										<input type="text" placeholder="请输入要添加的项目..." ref="xmItem">
									</div>
								</div>
							</li>
						</ul>
					</div>
					<a class="button active" @click="addItem()">点击添加</a>
				</f7-block>
				<div class="list-block">

					<f7-block inner class="C-qzB">
						<div class="list-block">

							<ul>
								<li class="item-content">

									<div class="item-inner">

										<div class="item-title label">项目名称</div>
										<div class="item-input">
											<input type="text" placeholder="请输入要删除的项目..." ref="delXmItem">
										</div>
									</div>
								</li>
							</ul>
						</div>
						<a class="button active" @click="delItem()">点击删除</a>
					</f7-block>

				</div>

			</div>
			<div class="list-block-label C-fds">
				<h4><a href="#" class="close-popup">点击返回</a></h4>
			</div>
		</div>

		<div class="popup popup-userInfo tablet-fullscreen">
			<div class="content-block">
				<div class="login-screen-title">个人资料</div>
				<div class="list-block">
					<ul v-if="userAllInfoObj">
						<li class="item-content">
							<div class="item-inner">
								<div class="item-title label">用户名</div>
								<div class="item-input">
									<input type="text" :value="userAllInfoObj.User" placeholder="用户名..." disabled="disabled" ref="cUser">
								</div>
							</div>
						</li>
						<li class="item-content">
							<div class="item-inner">
								<div class="item-title label">小号</div>
								<div class="item-input">
									<input type="text" :value="userAllInfoObj.Hitter" placeholder="小号..." ref="chitter">
								</div>
							</div>
						</li>
						<li class="item-content">
							<div class="item-inner">
								<div class="item-title label">QQ</div>
								<div class="item-input">
									<input type="text" :value="userAllInfoObj.QQ" placeholder="QQ..." ref="cqq">
								</div>
							</div>
						</li>
						<li class="item-content">
							<div class="item-inner">
								<div class="item-title label">QQ昵称</div>
								<div class="item-input">
									<input type="text" :value="userAllInfoObj.Nickname" placeholder="QQ昵称..." ref="cnickname">
								</div>
							</div>
						</li>
						<li class="item-content">
							<div class="item-inner">
								<div class="item-title label">Email</div>
								<div class="item-input">
									<input type="text" :value="userAllInfoObj.Email" placeholder="Email..." ref="cemail">
								</div>
							</div>
						</li>
					</ul>
				</div>
				<div class="list-block">
					<ul>
						<li>
							<a rel="noreferrer" href="#" class="item-link list-button C-alert" @click="changeUserInfo()">更新个人资料</a>
						</li>
					</ul>
				</div>

				<div class="list-block-label C-fds">
					<h4>
						<a href="#" class="close-popup">点击返回</a>
					</h4>
				</div>

			</div>
		</div>

		<div class="popup popup-pwd tablet-fullscreen">
			<div class="content-block">
				<div class="login-screen-title">修改密码</div>
				<div class="list-block">
					<ul>
						<li class="item-content">
							<div class="item-inner">
								<div class="item-title label">旧密码</div>
								<div class="item-input">
									<input type="password" placeholder="请输入旧密码..." ref="oldPwd">
								</div>
							</div>
						</li>
						<li class="item-content">
							<div class="item-inner">
								<div class="item-title label">新密码</div>
								<div class="item-input">
									<input type="password" placeholder="请输入新密码..." ref="newPwd">
								</div>
							</div>
						</li>
					</ul>
				</div>
				<div class="list-block">
					<ul>
						<li>
							<a rel="noreferrer" href="#" class="item-link list-button C-alert" @click="changePwd()">修改密码</a>
						</li>
					</ul>
				</div>

				<div class="list-block-label C-fds">
					<h4>
						<a href="#" class="close-popup">点击返回</a>
					</h4>
				</div>

			</div>
		</div>

		<div class="views">
			<div class="view view-main">
				<div class="navbar">
					<div class="navbar-inner">
						<f7-nav-left>
							<f7-link icon="icon-bars" open-panel="left"></f7-link>
						</f7-nav-left>
						<div class="center">GitStar</div>
						<div class="right"></div>
						<div class="subnavbar">
							<div class="buttons-row">
								<a rel="noreferrer" href="#tab1" class="button tab-link active">项目大厅</a>
								<a rel="noreferrer" href="#tab2" class="button tab-link">我的项目</a>
								<a rel="noreferrer" href="#tab3" class="button tab-link">欠我赞的</a>
								<a rel="noreferrer" href="#tab4" class="button tab-link">欠赞排行</a>
							</div>
						</div>
					</div>
				</div>
				<div class="pages navbar-through">
					<div data-page="home" class="page with-subnavbar">
						<div class="page-content hide-bars-on-scroll">
							<div class="tabs">
								<div id="tab1" class="tab active">
									<f7-block inner class="C-qzB" v-if="numObj">
										<div class="row">
											<div class="col-33">我的点赞：<b class="C-num">{{numObj.StarringCount}}</b></div>
											<div class="col-33">我被点赞：<b class="C-num">{{numObj.StarredCount}}</b></div>
											<div class="col-33">欠赞：<b class="C-num">{{numObj.OweCount}}</b></div>
										</div>
									</f7-block>

									<f7-block inner class="C-qzB" v-if="msgHtml">
										<div class="C-note" v-html="msgHtml">
										</div>
									</f7-block>
									<f7-block inner class="C-qzB">
										<a rel="noreferrer" @click="refreshPage()" class="button active" :disabled="disabled">{{refreshNote}}</a>
									</f7-block>
									<div v-if="homeObj">
										<div class="content-block C-qzB" v-for="item in homeObj">
											<f7-block inner class="C-qzB">
												<div class="C-items-tab1">
													<ul>
														<a rel="noreferrer" :href="'https://github.com/'+item.Repo" class="external" target="_blank">
															<h2>{{item.Repo}}</h2></a>
														<li><b>我还欠{{item.Target}}<b class="C-num">{{item.ScoreR}}</b>个赞</b>
														</li>
													</ul>
												</div>
											</f7-block>
										</div>
									</div>
								</div>
								<div id="tab2" class="tab">
									<div class="content-block C-qzB" v-if="repObj">
										<f7-block inner class="C-qzB" v-for="item in repObj">
											<div class="C-items">
												<ul>
													<li>
														<h2>我的项目<a rel="noreferrer" :href="'https://github.com/'+item.Name" class="external" target="_blank">{{item.Name}}</a>获得以下<b class="C-num">{{item.Stargazers.length}}</b>人点赞。</h2></li>

													</li>
													<li v-for="ss in item.Stargazers">
														<b class="C-num">{{ss}}</b>
													</li>

												</ul>
											</div>
										</f7-block>
									</div>

								</div>
								<div id="tab3" class="tab">
									<div class="content-block C-qzB" v-if="ownObj">
										<f7-block inner class="C-qzB" v-for="item in ownObj">
											<div class="C-items">
												<ul>
													<h2>{{item.Target}}还欠我<b class="C-num">{{item.Score}}</b>个赞</h2>
													<li><b>{{item.Target}}</b></li>
													<li><b>QQ：</b> {{item.QQ}}</li>
													<li><b>昵称:</b> {{item.Nickname}}</li>
													<li><b>我已赞{{item.Target}}<b class="C-num">{{item.StarringRepos.length}}</b>个项目:</b>
														<ul v-for="sr in item.StarringRepos">
															<li>
																<a rel="noreferrer" :href="'https://github.com/'+sr" class="external" target="_blank"><b>{{sr}}</b></a>
															</li>
														</ul>
													</li>
													<li><b>{{item.Target}}已赞我<b class="C-num">{{item.StarredRepos.length}}</b>个项目:</b>
														<ul v-for="sedr in item.StarredRepos">
															<li>
																<a rel="noreferrer" :href="'https://github.com/'+sedr" class="external" target="_blank"><b>{{sedr}}</b></a>
															</li>
														</ul>
													</li>
													<li><b>我还可以赞{{item.Target}}<b class="C-num">{{item.CanStarRepos.length}}</b>个项目:</b>
														<ul v-for="csr in item.CanStarRepos">
															<li>
																<a rel="noreferrer" :href="'https://github.com/'+csr" class="external" target="_blank"><b>{{csr}}</b></a>
															</li>
														</ul>
													</li>
													<li><b>{{item.Target}}还可以赞我<b class="C-num">{{item.CanBeStarredRepos.length}}</b>个项目:</b>
														<ul v-for="cbsr in item.CanBeStarredRepos">
															<li>
																<a rel="noreferrer" :href="'https://github.com/'+cbsr" class="external" target="_blank"><b>{{cbsr}}</b></a>
															</li>
														</ul>
													</li>
												</ul>
											</div>
										</f7-block>
									</div>
								</div>
								<div id="tab4" class="tab">
									<div class="content-block C-qzB" v-if="obj">
										<f7-block inner class="C-qzB" v-for="item in obj">
											<div class="C-items">
												<ul>
													<h2>{{item.Target}}还欠{{item.User}}<b class="C-num">{{item.Score}}</b>个赞</h2>
													<li><b>{{item.Target}}</b></li>
													<li><b>QQ：</b> {{item.QQ}}</li>
													<li><b>昵称:</b> {{item.Nickname}}</li>
													<li><b>{{item.User}}已赞{{item.Target}}<b class="C-num">{{item.StarringRepos.length}}</b>个项目:</b>
														<ul v-for="sr in item.StarringRepos">
															<li>
																<a rel="noreferrer" :href="'https://github.com/'+sr" class="external" target="_blank"><b>{{sr}}</b></a>
															</li>
														</ul>
													</li>
													<li><b>{{item.Target}}已赞{{item.User}}<b class="C-num">{{item.StarredRepos.length}}</b>个项目:</b>
														<ul v-for="sedr in item.StarredRepos">
															<li>
																<a rel="noreferrer" :href="'https://github.com/'+sedr" class="external" target="_blank"><b>{{sedr}}</b></a>
															</li>
														</ul>
													</li>
													<li><b>{{item.User}}还可以赞{{item.Target}}<b class="C-num">{{item.CanStarRepos.length}}</b>个项目:</b>
														<ul v-for="csr in item.CanStarRepos">
															<li>
																<a rel="noreferrer" :href="'https://github.com/'+csr" class="external" target="_blank"><b>{{csr}}</b></a>
															</li>
														</ul>
													</li>
													<li><b>{{item.Target}}还可以赞{{item.User}}<b class="C-num">{{item.CanBeStarredRepos.length}}</b>个项目:</b>
														<ul v-for="cbsr in item.CanBeStarredRepos">
															<li>
																<a rel="noreferrer" :href="'https://github.com/'+cbsr" class="external" target="_blank"><b>{{cbsr}}</b></a>
															</li>
														</ul>
													</li>
												</ul>
											</div>
										</f7-block>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

	</div>
</template>

<script>
	let url = 'http://218.241.135.34:88'
	let myApp = new Framework7()
	let $$ = Dom7
	const Base64 = require('js-base64').Base64
	import qs from 'qs'
	let md5 = require('js-md5')
	export default {
		data() {
			return {
				userName: '',
				disabled: false,
				msgHtml: '',
				refreshNote: '已点赞，换一批项目',
				obj: {},
				ownObj: {},
				homeObj: {},
				repObj: {},
				numObj: {},
				userAllInfoObj: {},
			}
		},
		created() {

		},
		mounted() {
			try {
				if(sessionStorage.userInfo && sessionStorage.userName) {
					myApp.closeModal('.login-screen')
					try {
						this.$http.get(url + '/api/global/owe').then((res) => {
							res = res.data
							this.obj = JSON.parse(JSON.stringify(res))
							let userArr = []
							let j = 0
							for(let i = 0; i < res.length; i++) {
								if(res[i].User == JSON.parse(Base64.decode(sessionStorage.userName))) {
									userArr[j] = res[i]
									j++
								}
							}
							this.ownObj = userArr
						})
						this.$http.get(url + '/api/global/messages').then((res) => {
							res = res.data
							this.msgHtml = Base64.decode(res[0].Text)
						})
					} catch(e) {
						console.log(e)
					}
					let allUrl = url + '/api/users/' + JSON.parse(Base64.decode(sessionStorage.userName)) + '/status/recommend'
					let repUrl = url + '/api/users/' + JSON.parse(Base64.decode(sessionStorage.userName)) + '/repos/extended'
					let numUrl = url + '/api/users/' + JSON.parse(Base64.decode(sessionStorage.userName)) + '/extended'
					let uinfoUrl = url + '/api/users/' + JSON.parse(Base64.decode(sessionStorage.userName)) + '/'

					this.$http.get(uinfoUrl).then((res) => {
						res = res.data
						this.userAllInfoObj = res
					})
					this.$http.get(allUrl).then((res) => {
						res = res.data
						this.homeObj = res
					})
					this.$http.get(repUrl).then((res) => {
						res = res.data
						this.repObj = res
					})
					this.$http.get(numUrl).then((res) => {
						res = res.data
						this.numObj = res
					})
				}
			} catch(e) {
				console.log(e)
			}
		},
		methods: {
			getUserInfo() {
				try {
					if(!this.$refs.uname.value || !this.$refs.pwd.value) {
						myApp.alert('用户名或密码不能为空！', 'GitStar提示！', function() {

						})
					} else {
						let postData = qs.stringify({
							"username": this.$refs.uname.value,
							"password": this.$refs.pwd.value
						})
						let axiosConfig = {
							method: 'post',
							url: url + '/api/user/login',
							data: postData,
							headers: {
								'Content-Type': 'application/x-www-form-urlencoded',
							}
						}
						this.$http(axiosConfig).then((res) => {
							res = res.data
							if(res.Code == 0) {
								myApp.alert(res.Msg, 'GitStar提示！', function() {

								})

							}
							if(res.Code == 200) {
								myApp.alert(res.Msg, 'GitStar提示！', function() {
									sessionStorage.userInfo = md5(JSON.stringify(res.Data) + 'gitstar')
									sessionStorage.userName = Base64.encode(JSON.stringify(res.Data))
									myApp.closeModal('.login-screen')
									location.reload()
								})

							}

						})
					}

				} catch(e) {
					console.log(e)
				}
			},
			loginOut() {
				let loginOutUrl = url + '/api/user/logout'
				this.$http.post(loginOutUrl).then((res) => {
					res = res.data
					if(res.Code == 200) {
						myApp.alert(res.Msg, 'GitStar提示！', function() {
							sessionStorage.ownStr = ''
							sessionStorage.userInfo = ''
							sessionStorage.userName = ''
							location.reload()
						})
					} else {
						sessionStorage.ownStr = ''
						sessionStorage.userInfo = ''
						sessionStorage.userName = ''
						location.reload()
					}
				})

			},
			refreshPage() {
				try {
					let refreshUrl = url + '/api/users/' + JSON.parse(Base64.decode(sessionStorage.userName)) + '/starring-repos/update'
					this.disabled = true
					this.refreshNote = '项目更新中...'
					this.$http.post(refreshUrl).then((res) => {
						res = res.data
						if(res.Code == 200) {
							myApp.alert('更新成功', 'GitStar提示！', function() {
								location.reload()
							})
						}
					})
				} catch(e) {
					console.log(e)
				}
			},
			regUser() {
				try {
					if(!this.$refs.regUname.value || !this.$refs.regPwd.value) {
						myApp.alert('用户名或密码不能为空！', 'GitStar提示！', function() {

						})
					} else {
						let postData = qs.stringify({
							"username": this.$refs.regUname.value,
							"password": this.$refs.regPwd.value
						})
						let axiosConfig = {
							method: 'post',
							url: url + '/api/user/register',
							data: postData,
							headers: {
								'Content-Type': 'application/x-www-form-urlencoded',
							}
						}
						this.$http(axiosConfig).then((res) => {
							res = res.data
							if(res.Code == 0) {
								myApp.alert(res.Msg, 'GitStar提示！', function() {

								})

							}
							if(res.Code == 200) {
								myApp.alert(res.Msg, 'GitStar提示！', function() {
									sessionStorage.userInfo = md5(JSON.stringify(res.Data) + 'gitstar')
									sessionStorage.userName = Base64.encode(JSON.stringify(res.Data))
									location.reload()
								})

							}

						})
					}

				} catch(e) {
					console.log(e)
				}
			},
			changePwd() {
				if(!this.$refs.oldPwd.value || !this.$refs.newPwd.value) {
					myApp.alert('旧密码或新密码不能为空！', 'GitStar提示！', function() {

					})
				} else {
					let postData = qs.stringify({
						"username": JSON.parse(Base64.decode(sessionStorage.userName)),
						"oldpassword": this.$refs.oldPwd.value,
						"newpassword": this.$refs.newPwd.value
					})
					let axiosConfig = {
						method: 'post',
						url: url + '/api/user/changepwd',
						data: postData,
						headers: {
							'Content-Type': 'application/x-www-form-urlencoded',
						}
					}
					this.$http(axiosConfig).then((res) => {
						res = res.data
						if(res.Code == 0) {
							myApp.alert(res.Msg, 'GitStar提示！', function() {

							})

						}
						if(res.Code == 200) {
							myApp.alert(res.Msg, 'GitStar提示！', function() {
								sessionStorage.ownStr = ''
								sessionStorage.userInfo = ''
								sessionStorage.userName = ''
								location.reload()
							})

						}

					})
				}

			},
			changeUserInfo() {
				try {
					let postData = qs.stringify({
						"user": this.$refs.cUser.value,
						"hitter": this.$refs.chitter.value,
						"qq": this.$refs.cqq.value,
						"nickname": this.$refs.cnickname.value,
						"email": this.$refs.cemail.value,
					})
					let axiosConfig = {
						method: 'post',
						url: url + '/api/users/' + JSON.parse(Base64.decode(sessionStorage.userName)) + '/update',
						data: postData,
						headers: {
							'Content-Type': 'application/x-www-form-urlencoded',
						}
					}
					this.$http(axiosConfig).then((res) => {
						res = res.data
						if(res.Code == 0) {
							myApp.alert(res.Msg, 'GitStar提示！', function() {

							})

						}
						if(res.Code == 200) {
							myApp.alert('更新成功！', 'GitStar提示！', function() {
								location.reload()
							})

						}

					})
				} catch(e) {
					console.log(e)
				}
			},
			addItem() {
				if(!this.$refs.xmItem.value) {
					myApp.alert('项目地址不能为空！', 'GitStar提示！', function() {

					})
				} else {
					let postData = qs.stringify({
						"user": JSON.parse(Base64.decode(sessionStorage.userName)),
						"repo": this.$refs.xmItem.value
					})
					let axiosConfig = {
						method: 'post',
						url: url + '/api/users/' + JSON.parse(Base64.decode(sessionStorage.userName)) + '/repos/add',
						data: postData,
						headers: {
							'Content-Type': 'application/x-www-form-urlencoded',
						}
					}
					this.$http(axiosConfig).then((res) => {
						res = res.data
						if(res.Code == 0) {
							myApp.alert(res.Msg, 'GitStar提示！', function() {

							})

						}
						if(res.Code == 200) {
							myApp.alert('添加成功！', 'GitStar提示！', function() {
								location.reload()
							})

						}

					})
				}

			},
			delItem() {
				if(!this.$refs.delXmItem.value) {
					myApp.alert('项目地址不能为空！', 'GitStar提示！', function() {

					})
				} else {
					let postData = qs.stringify({
						"user": JSON.parse(Base64.decode(sessionStorage.userName)),
						"repo": this.$refs.delXmItem.value
					})
					let axiosConfig = {
						method: 'post',
						url: url + '/api/users/' + JSON.parse(Base64.decode(sessionStorage.userName)) + '/repos/delete',
						data: postData,
						headers: {
							'Content-Type': 'application/x-www-form-urlencoded',
						}
					}
					this.$http(axiosConfig).then((res) => {
						res = res.data
						if(res.Code == 0) {
							myApp.alert(res.Msg, 'GitStar提示！', function() {

							})

						}
						if(res.Code == 200) {
							myApp.alert('删除成功！', 'GitStar提示！', function() {
								location.reload()
							})

						}

					})
				}

			},
		}
	}
</script>